<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <!--<rrOperation :crud="crud" />-->
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission"/>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :visible.sync="editDialog" width="600px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
          <el-form-item label="一级分类">
            <el-select v-model="form.upId" placeholder="请选择">
              <el-option
                v-for="item in oneList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <!--<el-input v-model="form.upId" style="width: 370px;" />-->
          </el-form-item>
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="form.name" style="width: 370px;"/>
          </el-form-item>
          <!--<el-form-item label="图标">
            <el-input v-model="form.pic" style="width: 370px;" />
          </el-form-item>-->
          <el-form-item label="图标">
            <el-upload
              class="avatar-uploader"
              :action="qiNiuUploadApi"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>
          <el-form-item label="分类状态" prop="status">
            <el-radio v-model="form.status" :label="true">是</el-radio>
            <el-radio v-model="form.status" :label="false">否</el-radio>
          </el-form-item>
          <el-form-item label="分类排序">
            <el-input v-model="form.sort" style="width: 370px;"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialog = false">取 消</el-button>
          <el-button type="primary" @click="toEdit">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        :data="treeData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'categories', hasChildren: 'hasChildren'}"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="id" width="80"/>
        <el-table-column prop="name" label="分类名称"/>
        <el-table-column prop="pic" label="图标">
          <template slot-scope="scope">
            <el-avatar :size="50" :src="scope.row.pic"/>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="分类排序"/>
        <el-table-column prop="status" label="分类状态">
          <template slot-scope="scope">
            {{ dict.label.is_status_tf[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="openEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="id" />
        <el-table-column prop="pic" label="图标" />
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="sort" label="分类排序" />
        <el-table-column prop="upId" label="上级分类Id （一级分类为空）" />
        <el-table-column prop="status" label="分类状态">
          <template slot-scope="scope">
            {{ dict.label.is_status[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column v-permission="['admin','ycCategory:edit','ycCategory:del']" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>-->
      <!--分页组件-->
      <!-- <pagination />-->
    </div>
  </div>
</template>

<script>
  import crudYcCategory from '@/api/goods/goodsCategory'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import { getUpList } from '../../../api/goods/goodsCategory'
  import { mapGetters } from 'vuex'
  import { getToken } from '@/utils/auth'
  import crudQiNiu from '@/api/tools/qiniu'

  const defaultForm = {
    id: null,
    name: null,
    pic: null,
    status: null,
    sort: null,
    createTime: null,
    updateTime: null,
    upId: null
  }
  export default {
    name: 'YcCategory',
    components: { pagination, crudOperation, rrOperation, udOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['is_status_tf'],
    cruds() {
      return CRUD({ title: '商品分类', url: 'api/ycCategory', sort: 'id,desc', crudMethod: { ...crudYcCategory } })
    },
    data() {
      return {
        permission: {
          add: ['admin', 'ycCategory:add'],
          edit: ['admin', 'ycCategory:edit'],
          del: ['admin', 'ycCategory:del']
        },
        rules: {
          name: [
            { required: true, message: '分类名称不能为空', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '分类状态不能为空', trigger: 'blur' }
          ]
        },
        queryTypeOptions: [
          { key: 'id', display_name: 'id' },
          { key: 'status', display_name: '分类状态1.启用 0禁用' },
          { key: 'upId', display_name: '上级分类Id （一级分类为空）' }
        ],
        upList: [],
        treeData: [],
        oneList: [],
        //
        editDialog: false,
        //
        headers: {
          'Authorization': getToken()
        },
        imageUrl: ''
      }
    },
    computed: {
      ...mapGetters([
        'qiNiuUploadApi'
      ])
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
        this.getOneList()
        this.getTree()
        return true
      },
      [CRUD.HOOK.beforeToAdd]() {
        this.imageUrl = ''
        return true
      },
      [CRUD.HOOK.beforeToEdit]() {
        this.imageUrl = ''
        return true
      },
      //
      openEdit(rows) {
        this.form = rows
        this.editDialog = true
      },
      toEdit() {
        console.log(this.form)
        /* crudYcCategory.edit().then(res => {
          console.log(res);
        })*/
      },
      //
      getUpList() {
        crudYcCategory.getUpIdIsNotNullList().then(res => {
          console.log(res)
        })
      },
      getOneList() {
        crudYcCategory.getUpIdIsNull().then(res => {
          this.oneList = res
          console.log(res)
        })
      },
      getTree() {
        crudYcCategory.getTree().then(res => {
          if (res) {
            this.treeData = res
          }
          console.log('getTree==========')
          console.log(res)
        })
      },
      handleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.imageUrl = URL.createObjectURL(file.raw)
        this.form.pic = this.imageUrl
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
  }

  .avatar-uploader:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px !important;
    height: 178px !important;
    display: block;
  }
</style>
